<template>
  <div class="container">
    <div class="help-navBar-item">
      <div class="yh-layout-box">
        <div class="nav-ul">
          <a class="nav-list"  @click="routeToPath('/help');active=0;" :class="{active:active === 0}" >首页</a>
          <a class="nav-list" @click="routeToPath('/help/detail?active=1-0&Id='+Id, 'current');" :class="{active:active === 1}" >常见问题</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getSelectPcList} from '@/api/news';

  export default {
  name: 'Nav',
  components: {

  },
  data() {
    return {
        active:0,
        Id:null,
    }
  },
  created() {
      //判断路由选择
      var url = this.$route.path;
      if(url.indexOf("/help/detail")>=0){
          this.active = 1;
      }else{
        this.active = 0;
      }
      this.getPcList();
  },
  methods: {
    //类目列表
    getPcList(){
      getSelectPcList().then(res =>{
        var classList = res.data;
        if(classList.length>0){
          if(classList[0].list.length>0){
              this.Id = classList[0].list[0].id;
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.help-navBar-item{
  width: 100%;
  min-width: 1200px;
  height: 48px;
  background: #255B8B;
  .nav-ul{
    width: 100%;
    .nav-list{
      display: inline-block;
      width: 80px;
      height: 48px;
      line-height: 48px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      opacity: 0.6;
      &.active{
        opacity: 1;
      }
    }
  }
}
</style>
